<template>
  <div v-if="!typerInitialized">
    <tg-table-basic-dialog
      ref="ref-main"
      :title="title"
      :dialog-c-m="dialogCM"
      :max-height="maxHeight"
      :hold-height="holdHeight"
      :table="table"
      :control-bar="controlBar"
      :searcher="searcher"
      :pagination-config="paginationConfig"
    />
    <component
      :is="item.component"
      v-for="(item, index) in components"
      :key="buildDOMKey(item, index)"
      :ref="`ref-sub-${index}`"
      v-bind="item.props"
      v-on="item.events"
    />
  </div>
</template>

<script lang="ts">
/*
prop 列表 [参考 Template]
metaType 列表 [参考 TgTableBasic]
  title
  dialogCM
  maxHeight
  holdHeight
  table
  controlBar
  searcher
  paginationConfig
ref 列表
  ref-main [默认]
  ref-sub-${index}
*/
import { Component } from 'vue-property-decorator'
import { ITgTableBasicDialog } from '@TG/interface/types/component'
import Template from './Template'
import TgTableBasicDialog from '@TG/components/TgTable/TgTableBasicDialog.vue'

@Component({
  name: 'TyperListBasicDialog',
  components: {
    TgTableBasicDialog
  }
})
export default class extends Template {
  private dynamicModel: any = {}

  get title() {
    return this.getMeta(this, 'title')
  }

  get dialogCM() {
    return this.getMeta(this, 'dialogCM')
  }

  get maxHeight() {
    return this.getMeta(this, 'maxHeight')
  }

  get holdHeight() {
    return this.getMeta(this, 'holdHeight')
  }

  get table() {
    return this.getMeta(this, 'table')
  }

  get controlBar() {
    return this.getMeta(this, 'controlBar')
  }

  get searcher() {
    const table = this.ref() as ITgTableBasicDialog
    const searcherModel = Object.assign({}, table.getQuerier(), this.dynamicModel)
    const searcher = this.getMeta(this, 'searcher')(searcherModel)
    return Object.assign({}, searcher, {
      props: { model: searcherModel }
    })
  }

  get paginationConfig() {
    return this.getMeta(this, 'paginationConfig')
  }

  public getTemplateName() {
    return 'TyperListBasicDialog'
  }

  public getMainData() {
    const table = this.ref() as ITgTableBasicDialog
    return table.getSelectedRows()
  }

  public refresh() {
    const table = this.ref() as ITgTableBasicDialog
    table.doSearch()
  }

  public defaultRef() {
    return 'ref-main'
  }

  public showDialog(dynamicModel: any) {
    const table = this.ref() as ITgTableBasicDialog
    table.showDialog()
    if (JSON.stringify(dynamicModel) !== JSON.stringify(this.dynamicModel)) {
      this.dynamicModel = dynamicModel
      table.clearSearcher()
    }
    table.initTable()
  }

  public hideDialog() {
    const table = this.ref() as ITgTableBasicDialog
    table.hideDialog()
  }
}
</script>
